<template>
    <div class="commends">
         <div class="coms">
               <li 
                v-for="(item,index) in recommendslist" 
                :key="index"
                >
                        <div class="left">
                            <img :src="item.imgUrl" alt="" @click="goDetails(item,index)">
                            <p class="p1">{{item.title}}</p>
                            <p class="p2">￥{{item.price}}</p>
                        </div>
                <div>
                    <button @click="btn(item)">加入购物车</button>
                </div>
            </li>
         </div>
    </div>
</template>
<script>
import {mapState,mapActions} from "vuex";
import BScroll from "better-scroll";
import { Indicator } from 'mint-ui';
export default {
    components:{

    },
    data(){
        return {
             index:0,
             listLength:5, //数据长度
             scrollTops:'',
        }
    },
    computed:{
       ...mapState(['recommendslist'])
    },
    methods:{
        ...mapActions(['getRecommendsFn']),
         goDetails(item,index){
              //console.log(item,index)
              this.$router.push({
                   path:"/details",
                   query:{
                       id:item.id,
                       imgUrl:item.imgUrl,
                       title:item.title,
                       price:item.price
                   }
              })
         },
         btn(item){
             //console.log(item.id)
             this.axios.post("/api/shopcars",{
                  id:item.id,
                  title:item.title,
                  price:item.price,
                  img:item.imgUrl
             }).then(res=>{
                 this.$store.commit("addCars",res.data)
             })
         }
    },
    created(){
     
       
    },
    mounted(){

      //Indicator.open('加载中...');

       this.getRecommendsFn({
            index:this.index,
            listLength:this.listLength,
            callBack:()=>{
                 //Indicator.close();
            }
       })
    },
    watch:{
        recommendslist(){
             this.$nextTick(()=>{
                   this.scrollTops=new BScroll(".commends",{
                        probeType:2,
                        click:true,
                    });
                    this.scrollTops.on("touchEnd",(pos)=>{
                        //console.log(this.scrollTops.maxScrollY,pos.y)
                        if(this.scrollTops.maxScrollY > pos.y+40){
                                //console.log("加载了...")
                                this.index+=5;
                                // Indicator.open('加载中...');
                                this.getRecommendsFn({
                                        index:this.index,
                                        listLength:this.listLength,
                                         callBack:()=>{
                                            //Indicator.close();
                                        }
                                })
                        }
                    })
             })
        }
    }
}
</script>
<style scoped lang="scss">
@import "~@/scss/common.scss";
.commends{
    width:100%;
    height:100%;
    overflow: hidden;
    .coms{
        width:100%;
         li{
        width:100%;
        height:pxTorem(286px);
        display:flex;
        justify-content:space-between;
        padding:0 pxTorem(7px);
        align-items:center;
        margin:pxTorme(7px) 0;
        overflow-x:hidden;
        .left{
            width:50%;
            height:100%;
            img{
                 width:pxTorem(186px);
                 height:pxTorem(186px);
            }
            .p1{
                font-size:pxTorem(15px);
                font-weight:bold;
                margin-top:4px;
            }
            .p2{
                font-size:pxTorem(14px);
                margin-top:4px;
                color:red;
            }
        }
     }
    }
}
</style>